<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .my-button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            min-height: 40px;
            background-color: orangered;
            border-radius: 80px;
            box-shadow: 0 5px 3px rgba(0,0,0,.2);
            cursor: pointer;
            color: #fff;
        }
    </style>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <div id="app">
        <button>点击</button>
        <!-- <my-button><h1>点击</h1></my-button> -->
        <my-button >点击</my-button>
        <my-button>
            <i class="iconfont iconsearch"></i>
        </my-button>
        <my-button>{{btnText}}</my-button>

        <!-- 这个是错误的，这个是子组件的数据，不能往父组件插 -->
        <!-- <my-button>{{text}}</my-button> -->
        <my-button></my-button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 组件的插槽，slot，预留的位置，可以让父组件往插槽中插入内容
        // 每一个组件都有自己的作用域，这些作用域的数据是相互隔离的，
        // 父组件的模板（html）只能用自己里面的数据,子组件的模板只能用自己的数据
        // slot标签中间的内容是默认值
        Vue.component("MyButton",{
            // slot相当于一个容器
            template: `<div class="my-button">
                            <slot>{{text}}</slot>
                        </div>`,
            data(){
                return{
                    text: "子组件文字"
                }
            }
        })

        var vm = new Vue({
            el:"#app",
            data:{
                flag: true,
                btnText: "点击按钮"
            }
        })
    </script>
</body>
</html>